<script setup lang="ts">
/**
 * Check app update steps.
 * - nativeAPI.getAppVersion() gets current app version.
 * - Uses app version to query update info from api.
 * - If update exists
 *  - nativeAPI.getSystemTempDir() gets system temporary directory path.
 *  - nativeAPI.downloadFile({ url: updateFileUrl, targetDir: systemTempDir }) downloads update file to system temporary directory.
 *  - nativeAPI.execFile(downoadedFileFullName) executes update file.
 *  - nativeAPI.exitApp() exits current app for update.
 *  - Applies mandatory update as your needs.
 */

import { Menu as IconMenu, User } from '@element-plus/icons-vue';
import { useAuthenticationStore } from 'my-vue-core/stores';
import { AuthenticationService, CommonService } from 'my-web-core/services';

import router from './app-router';
import AuthService from './features/authentication/auth-service';
import UserAvatar from './features/user/UserAvatar.vue';

const authenticationStore = useAuthenticationStore();
const win = window as any;

function logout(): void {
  new AuthService().logout();
  router.push('/authentication/login');
  authenticationStore.changeIsAuthenticated(AuthenticationService.isAuthenticated);
  authenticationStore.changeCurrentUser(AuthenticationService.currentUser);
}
</script>

<template>
  <el-container class="main-container">
    <el-header v-if="authenticationStore.isAuthenticated">
      <img src="/assets/images/logo.png" class="logo" alt="logo" />
      <h3 class="header-title">平台管理系统</h3>
      <div class="header-user">
        <el-dropdown>
          <!-- defineAsyncComponent of UserAvatar will cause _a2.getBoundingClientRect is not a function error since element-plus 2.2.32 -->
          <UserAvatar :user="authenticationStore.currentUser!" style="color: #fff" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改资料</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              <el-dropdown-item divided @click="win.nativeAPI.exitApp">关闭程序</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" v-if="authenticationStore.isAuthenticated">
        <el-menu :default-active="$route.path" :default-openeds="['/user']" router>
          <el-menu-item index="/home">
            <el-icon>
              <icon-menu />
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="/user">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/list">列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container :style="authenticationStore.isAuthenticated ? { padding: '0 24px 10px' } : {}">
        <el-main
          :style="
            authenticationStore.isAuthenticated
              ? { background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }
              : { padding: '0px' }
          "
        >
          <router-view />
        </el-main>
        <el-footer v-if="authenticationStore.isAuthenticated"
          >Element Plus ©{{ CommonService.getCurrentDate().getFullYear() }} Created by
          Community</el-footer
        >
      </el-container>
    </el-container>
  </el-container>
</template>

<style scoped>
.main-container {
  background-color: #f0f2f5;
  min-height: 100vh;
}

.el-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  background-color: #001529;
  height: 64px;
  padding: 0 50px;
}

.el-menu {
  height: 100%;
}

.el-footer {
  height: 32px;
  padding: 14px 0px;
}

.logo {
  width: 50px;
  height: 50px;
  margin-top: 6px;
}

.header-title {
  margin-left: 10px;
}

.header-user {
  margin-left: auto;
}

.footer {
  text-align: left;
  padding: 10px 0px 0px 0px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
